<?php


use Sc\Util\HtmlElement\El;
use Sc\Util\HtmlStructure\Html\Html;
use Sc\Util\HtmlStructure\Html\Js;
use Sc\Util\HtmlStructure\Html\Js\Grammar;
use Sc\Util\HtmlStructure\Html\Js\JsCode;
use Sc\Util\HtmlStructure\Table;

$el = El::double('el-card')->setAttr('v-if', 'currentApiInfo')->append(
    El::double('el-tabs')->setAttr('v-model', 'showParamInfo')
        ->setAttr('@tab-change', 'apiShowType')->append(
            El::double('el-tab-pane')->setAttr('label', '请求参数')->setAttr('name', 'request')->append(
                Table::create([], 'rep')
                    ->setAttr('row-key', 'name')
                    ->setAttr(':row-style', 'RowStyle')
                    ->addColumns(
                    Table\Column::normal("参数名", 'name')->align('left')->setAttr('width', 200),
                    Table\Column::normal("版本", 'version')->setFormat("{{ @Math.abs(version) }}"),
                    Table\Column::normal("类型", 'type'),
                    Table\Column::normal("必须", 'required'),
                    Table\Column::normal("描述", 'describe')->setAttr('width', 200),
                )->setMaxHeight(-170)->render()->find('el-table')->setAttr(':data', 'currentApiInfo.requestParams'),
            ),
            El::double('el-tab-pane')->setAttr('label', '响应参数')->setAttr('name', 'response')->append(
                Table::create([],'rsp')
                    ->setAttr('row-key', 'name')
                    ->setAttr(':row-style', 'RowStyle')
                    ->addColumns(
                    Table\Column::normal("参数名", 'name')->align('left')->setAttr('width', 200),
                    Table\Column::normal("版本", 'version'),
                    Table\Column::normal("类型", 'type'),
                    Table\Column::normal("必须", 'required'),
                    Table\Column::normal("描述", 'describe')->setAttr('width', 200),
                )->setMaxHeight(-170)->render()->find('el-table')->setAttr(':data', 'currentApiInfo.responseParams'),
            )
        )
);

$newMounted = [];
foreach (Html::js()->vue->getConfig('mounted') as $index => $item) {

    if ($item instanceof JsCode && str_contains($item->toCode(), 'maxHeight')) {
        $code = strtr(Grammar::extract($item), ['setTimeout(() => {' => '', '})' => '']);
        $code = trim($code);
        $item = JsCode::create("let i$index = setInterval(() => { try{ $code; clearInterval(i$index); } catch (e) {} }, 10)");
    }
    $newMounted[] = $item;
}

Html::js()->vue->config('mounted', $newMounted);
Html::js()->vue->addMethod('RowStyle', ['{row, rowIndex}'], Js::code(
    Js::if('row.version === 1')->then(
        Js::return(),
    ),
    Js::if('row.version < 1')->then(
        Js::return("`color: rgb(250, 182, 182);text-decoration: line-through;`"),
    ),
    Js::let("tm", 0.5),
    Js::for('let i = 0; i < this.ApiInfo.version.length; i++')->then(
          Js::if('this.ApiInfo.version[i] === row.version')->then(
              Js::code('break;')
          ),
          Js::code("tm += 0.05")
    ),
    Js::return("`background-color: rgb(103, 194, 58, \${tm});`")
));

return $el;